<template>
  <div id="grade">
    <h1 class="info">
      {{getQueBankInfo(queBankId).queBankName}}
      <el-tag type="info">
        科目 : {{getQueBankInfo(queBankId).subName}}
      </el-tag>
      <el-tag effect="dark">
        耗时 : {{getTime(queBankId).minute}} : {{getTime(queBankId).second}}
      </el-tag>
      <el-tag effect="dark" type="warning">
        得分 : {{getScoreInfo(queBankId).score}} / {{getScoreInfo(queBankId).total}}
      </el-tag>
      <el-tag effect="dark" type="success">
        得分率 : {{(getScoreInfo(queBankId).score/getScoreInfo(queBankId).total*100).toFixed(2)+' % '}}
      </el-tag>
      <el-tag effect="dark" type="danger">
        待定分数 : {{getScoreInfo(queBankId).remainder}}
      </el-tag>
    </h1>
    <el-table
      :data="topic"
      style="width: 100%"
      border
      stripe
      :height="height">
      <el-table-column type="expand">
        <template v-slot:default="{row}">
          <option-group :disabled="true" :topic="row"></option-group>
          <template v-if="row.rAnswer">
            <el-popover
              placement="left"
              :title="row.type==='2'?'批阅':'答案'"
              width="200"
              trigger="click"
              :content="row.rAnswer">
              <el-button type="text" slot="reference">查看{{row.type==='2'?'批阅':'答案'}}</el-button>
            </el-popover>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        label="题号"
        width="50">
        <template v-slot:default="{row:{queNum}}">
          {{queNum}}
        </template>
      </el-table-column>
      <el-table-column
        label="题干">
        <template v-slot:default="{row:{queNum,isSound,title,pic}}">
          <template v-if="isSound==='1'">
            <p class="read" @click="$refs['read'+queNum].play()">根据读音选择下列对应选项
              <el-icon name="video-play"></el-icon>
            </p>
            <audio :ref="'read'+queNum" :src="'http://dict.youdao.com/dictvoice?audio='+title"></audio>
          </template>
          <template v-else>
            <p v-html="title"></p>
            <el-image v-if="pic" :src="'http://songqiang.club/'+pic"
                      :preview-src-list="['http://songqiang.club/'+pic]"></el-image>
          </template>
        </template>
      </el-table-column>
      <el-table-column
        label="分值"
        width="50">
        <template v-slot:default="{row:{score}}">
          {{score||'未定'}}
        </template>
      </el-table-column>
      <el-table-column
        label="类型"
        width="80"
        prop="type"
        :filters="topicType"
        :filter-method="filterType"
        filter-placement="bottom-end">
        <template v-slot:default="{row:{type}}">
          <el-tag
            :type="getTopicTag(type).tag"
            effect="dark">
            {{getTopicTag(type).name}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="结果"
        width="80"
        prop="result"
        :filters="markStatus"
        :filter-method="filterResult"
        filter-placement="bottom-end"
      >
        <template v-slot:default="{row:{result}}">
          <el-tag v-if="result==0" type="warning">未做</el-tag>
          <el-tag v-else-if="result==1" type="success">正确</el-tag>
          <el-tag v-else-if="result==3" type="info">待定</el-tag>
          <el-tag v-else-if="result==4">已批阅</el-tag>
          <el-tag v-else type="danger">错误</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import {mapGetters, mapState} from "vuex";
  import {letter, getTopicTag, formatTime} from '@/util/function'
  import OptionGroup from "@/view/answer/option"

  export default {
    name: "grade",
    components: {OptionGroup},
    props: ['queBankId'],
    data() {
      return {
        height: null,
        topicType: [
          {text: '单选', value: '0'},
          {text: '多选', value: '1'},
          {text: '简答', value: '2'},
          {text: '判断', value: '3'},
          {text: '填空', value: '4'},
        ],
        markStatus: [
          {text: '未做', value: '0'},
          {text: '正确', value: '1'},
          {text: '错误', value: '2'},
          {text: '待定', value: '3'},
          {text: '已批阅', value: '4'}
        ]
      }
    },
    computed: {
      ...mapState({
        topic: state => state.topic,
        answerTime: state => state.answerTime,
        curHistoryInfo: state => state.curHistoryInfo
      }),
      ...mapGetters(['getQueBankInfo', 'getScoreInfo', 'getTime'])
    },
    mounted() {
      this.height = document.querySelector('#grade').clientHeight
    },
    methods: {
      letter,
      getTopicTag,
      formatTime,
      filterResult(v, row) {
        return row.result === v
      },
      filterType(v, row) {
        return row.type === v
      },
    },
  }
</script>

<style scoped>
  #grade {
    display: flex;
    width: 100%;
    height: calc(100% - 20px);
    margin-bottom: 20px;
    align-items: center;
    flex-direction: column;
  }

  .el-table .true {
    background: oldlace;
  }

  .el-table .false {
    background: #f0f9eb;
  }

  .info {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
  }

  .info > span {
    margin-left: 10px;
  }

  .el-image {
    width: 50px;
  }

  .el-button {
    float: right;
  }
</style>
